<template>
  <view class="deepcover">
    <view class="bg-white padding-left full">
      <u-checkbox v-for="i in list" :key="i.id" v-model="i.imported" style="width: 100%;">
        <card :avatar="i.portrait" :name="i.name" :job="i.position" :company="i.company"></card>
      </u-checkbox>
    </view>
    
    <view class="padding-xl" v-if="list">
      <my-btn width="420" @click="submit">导入名片</my-btn>
    </view>
  </view>
</template>

<script>
  import card from '@/pages/cards/components/card.vue'
  export default {
    components: {
      card
    },
    onLoad(opt) {
      this.id = opt.id
      this.getList()
    },
    data() {
      return {
        id: '',
        list: []
      };
    },
    methods: {
      async getList() {
        let {
          list
        } = await this.$u.api.getImportCards(this.id)
        this.list = list
      },
      async submit() {
        let vcard = this.list.filter(item => item.imported).map(item => {
          return item.id
        })
        if (!vcard.length) {
          return
        }
        let params = {
          id: this.id,
          vcard_id: vcard
        }
        let res = await this.$u.post('/company/import/vcard', params)
        let { msg, result } = res.data
        this.$msg(msg, 1000, true).then(res => this.$goto(1))
      }
    }
  }
</script>

<style lang="scss">
  .cards {
    .gap {
      padding: 22rpx;
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #95969F;
    }
  }
</style>
